<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./layui-v2.4.5/layui/css/layui.css">
    <style>
      #form {
        width: 800px;
        margin-top: 50px;
      }
    </style>
</head>
<body>
        <form class="layui-form" action="" id="form" enctype="multipart/form-data">
                <div class="layui-form-item">
                  <label class="layui-form-label">输入框</label>
                  <div class="layui-input-block">
                    <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">密码框</label>
                  <div class="layui-input-inline">
                    <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                  </div>
                  <div class="layui-form-mid layui-word-aux">辅助文字</div>
                </div>
                <div class="layui-form-item layui-form-text">
                  <label class="layui-form-label">文本域</label>
                  <div class="layui-input-block">
                    <input type="file" name="f1" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">选择框</label>
                  <div class="layui-input-block">
                    <select name="city" lay-verify="required">
                      <option value=""></option>
                      <option value="0">北京</option>
                      <option value="1">上海</option>
                      <option value="2">广州</option>
                      <option value="3">深圳</option>
                      <option value="4">杭州</option>
                    </select>
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">复选框</label>
                  <div class="layui-input-block">
                    <input type="checkbox" name="like[write]" title="写作">
                    <input type="checkbox" name="like[read]" title="阅读" checked>
                    <input type="checkbox" name="like[dai]" title="发呆">
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">开关</label>
                  <div class="layui-input-block">
                    <input type="checkbox" name="switch" lay-skin="switch">
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">单选框</label>
                  <div class="layui-input-block">
                    <input type="radio" name="sex" value="男" title="男">
                    <input type="radio" name="sex" value="女" title="女" checked>
                  </div>
                </div>
                <div class="layui-form-item layui-form-text">
                  <label class="layui-form-label">文本域</label>
                  <div class="layui-input-block">
                    <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
                  </div>
                </div>
                <div class="layui-form-item">
                  <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                  </div>
                </div>
              </form>
              <button id="submit-btn" class="layui-btn" lay-filter="formDemo">立即提交</button>
              <img id="jpg" src="" alt="">
              <a href="/download/icon.jpg" lay-filter="formDemo" download="1.jpg">Dowload</a>
              <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
              <script src="./layui-v2.4.5/layui/layui.js"></script>
              <!-- <script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script> -->
        
              <script>
              //Demo
              $('#submit-btn').on('click', async () => {
                let adta = await fetch('/up', {
                    method: 'post',
                    body: new FormData($('#form')[0])
                  })
                let temp = await fetch('/getimg')
                let img = await temp.text()
                console.log(img)
                $('#jpg')[0].src=img
              })
              layui.use('form', function(){
                var form = layui.form;
                
                //监听提交
                form.on('submit(formDemo)', function(data){
                  // layer.msg(JSON.stringify(data.field));
                  // let adta = fetch('/up', {
                  //   method: 'post',
                  //   body: JSON.stringify(data.field)
                  // })
                  // let temp = await fetch('/getimg')
                  // let img = temp.text()
                  // console.log(temp)
                  $.ajax({
                    url: '/up',
                    type: 'post',
                    processData: false,
                    contentType: false,
                    data: new FormData($('#form')[0])
                  })
                  return false;
                });
              });
              $('#dowload').on('click', () => {
                  $.ajax({
                      url: '/download/icon.jpg',
                      type: 'post'
                  })
              })
              
              </script>
   
</body>
</html>